<template>
    <div class="card">
        <!-- 如果没有文章就显示空状态 -->
        <el-empty description="当前还没有文章哦~" v-show="articles.length == 0"></el-empty>
        <div class="article" v-for="article in articles" :key="article.id">
            <h2 class="title">{{ article.title }}</h2>
            <span class="content">{{ article.content }}</span>
            <div class="action">
                <div class="col">
                    <img src="../../assets/img/点赞 (off).png" alt="">
                    <span>{{ article.likeCount }}</span>
                </div>
                <div class="col">
                    <img src="../../assets/img/评论.png" alt="">
                    <span>{{ article.commentCount }}</span>
                </div>
                <div class="col">
                    <img src="../../assets/img/收藏 (off).png" alt="">
                    <span>{{ article.collectCount }}</span>
                </div>
            </div>
        </div>
        <!-- 分页 -->
        <div class="page" v-show="articles.length != 0">
            <el-pagination @current-change="handleCurrentChange" :page-size="pageSize" :current-page.sync="currentPage"
                layout="total, prev, pager, next" :total="totalPage">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name: 'FollowList',
    methods: {
        /**
         * 分页：选择指定页数后触发
         * @param {*} val 当前页数 
         */
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
    },
    data() {
        return {
            //文章列表
            articles: [],

            //当前所在页数
            currentPage: 1,
            //总页数
            totalPage: 100,
            //每页显示条数
            pageSize: 6,
        }
    }
}
</script>

<style scoped>
.card {
    width: 100%;
    height: 600px;
    overflow: auto;
}

.article {
    width: 100%;
    padding: 20px;
    border-bottom: 1px solid #f5f5f5;
}

.article .title {
    width: 100%;
    padding-bottom: 10px;
    font-size: 18px;
    font-synthesis: style;
    font-weight: 600;
}

.article .content {
    display: block;
    width: 100%;
    color: #121212;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
    font-size: 15px;
    padding-bottom: 10px;
}

.action {
    width: 300px;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.action img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.action span {
    display: block;
}

.action .col {
    width: 50px;
    display: flex;
    justify-content: left;
    align-items: center;
}

.page {
    width: 450px;
    height: 30px;
    margin: 5px auto;
}
</style>